<template>
    <div class="user">
        <Form ref="formInline" :model="dataForm" @submit.native.prevent inline>
            <FormItem prop="user">
                <i-input
                    type="text"
                    v-model="dataForm.userName"
                    @keyup.enter.native="getDataList()"
                    placeholder="输入用户名"
                >
                    <Icon type="ios-search" slot="prepend"></Icon>
                </i-input>
            </FormItem>
            <FormItem>
                <Button @click="getDataList()">查询</Button>
            </FormItem>
            <FormItem>
                <Button
                    v-if="isAuth('sys:user:save')"
                    @click="addOrUpdateHandle()"
                    type="success"
                >新增</Button>
            </FormItem>
            <FormItem>
                <Button
                    v-if="isAuth('sys:user:delete')"
                    @click="deleteHandle()"
                    :disabled="dataListSelections.length <= 0"
                    type="error"
                >批量删除</Button>
            </FormItem>
        </Form>
        <div>
            <Table
                border
                :loading="dataListLoading"
                ref="selection"
                :columns="columns4"
                :data="dataList"
                @on-selection-change="selectionChangeHandle"
            ></Table>
            <!-- <Button @click="handleSelectAll(true)">Set all selected</Button> -->
            <!-- <Button @click="handleSelectAll(false)">Cancel all selected</Button> -->
            <Page
                style="margin-top:20px;text-align:center;"
                :total="totalPage"
                size="small"
                show-elevator
                show-sizer
            />
        </div>
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>
<script>
import AddOrUpdate from "./user-add-update";
export default {
    data() {
        return {
            columns4: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "ID",
                    key: "userId",
                    width: 100,
                    ellipsis: true
                },
                {
                    title: "用户名",
                    key: "username"
                },
                {
                    title: "邮箱",
                    key: "email"
                },
                {
                    title: "手机号",
                    key: "mobile"
                },
                {
                    title: "状态",
                    key: "status",
                    render: (h, params) => {
                        return params.row.status
                            ? h("Tag", { props: { color: "orange" } }, "正常")
                            : h("Tag", { props: { color: "cyan" } }, "失效");
                    }
                },
                {
                    title: "创建时间",
                    key: "createTime",
                    render: (h, params) => {
                        return h(
                            "span",
                            this.dateFormat(params.row, params.column)
                        );
                    }
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                        ghost: true
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            // this.show(params.index);
                                            this.addOrUpdateHandle(
                                                params.row.userId
                                            );
                                        }
                                    }
                                },
                                "修改"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small",
                                        ghost: true
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteHandle(
                                                params.row.userId
                                            );
                                        }
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }
            ],

            //页面参数
            dataForm: {
                userName: ""
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false
        };
    },
    components: {
        AddOrUpdate
    },
    created() {},
    mounted() {
        this.getDataList();
    },
    methods: {
        // 新增 / 修改
        addOrUpdateHandle(id) {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id);
            });
        },
        handleSelectAll(status) {
            this.$refs.selection.selectAll(status);
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val;
            console.log(this.dataListSelections);
        },
        // 获取数据列表
        getDataList() {
            this.dataListLoading = true;
            this.$http({
                url: "/sys/user/list",
                method: "get",
                params: this.$http.adornParams({
                    page: this.pageIndex,
                    limit: this.pageSize,
                    username: this.dataForm.userName
                })
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.dataList = data.page.list;
                    this.totalPage = data.page.totalCount;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
        },
        // 删除
        deleteHandle(id) {
            var userIds = id
                ? [id]
                : this.dataListSelections.map(item => {
                      return item.userId;
                  });
            this.$Modal.confirm({
                title: "删除用户",
                content:
                    "<p>确定删除的ID=[" + userIds.join(",") + "]登录操作?</p>",
                onOk: () => {},
                onCancel: () => {
                    this.$Message.info("取消操作");
                }
            });
            console.log("删除id", userIds);
        }
    }
};
</script>